<template>
  <div>
    <!-- 公告 -->
      <Swiper />
    <Gengao />
  
    <!-- 表单收集 -->
    <el-form :model=" form" ref="form" label-width="100px" class="demo-dynamic bian" size="mini">
      <el-row>
        <el-col :span=20 :offset=1>
          <el-form-item label="时间:" prop="resource">
            <el-row>
              <el-radio-group v-model="form.resource" style="width:100%">
                <el-col :span=4 :offset=2>
                  <el-radio label="全部"></el-radio>
                </el-col>
                <el-col :span=5>
                  <el-radio label="三个月"></el-radio>
                </el-col>
                <el-col :span=5>
                  <el-radio label="九个月"></el-radio>
                </el-col>
                <el-col :span=5>
                  <el-radio label="十二个月"></el-radio>
                </el-col>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span=20 :offset=1>
          <el-form-item label="金额:" prop="name">
            <el-row>
              <el-radio-group v-model="form.name" style="width:100%">
                <el-col :span=3 :offset=2>
                  <el-radio label="全部"></el-radio>
                </el-col>
                <el-col :span=3>
                  <el-radio label="20万-50万"></el-radio>
                </el-col>
                <el-col :span=3>
                  <el-radio label="50万-100万"></el-radio>
                </el-col>
                <el-col :span=3>
                  <el-radio label="100万-300万"></el-radio>
                </el-col>
                <el-col :span=3>
                  <el-radio label="300万-1000万"></el-radio>
                </el-col>
                <el-col :span=3>
                  <el-radio label="1000万以上"></el-radio>
                </el-col>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span=20 :offset=1>
          <el-form-item label="区域:" prop="region">
            <el-row>
              <el-col :span=2 :offset=2>
                <el-select v-model="form.region[1]" placeholder="请选择省市" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-col>
              <el-col :span=2 :offset=1>
                <el-select v-model="form.region[0]" placeholder="请选择省市" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span=20 :offset=1>
          <el-form-item label="类型:" prop="date1e">
            <el-row>
              <el-radio-group v-model="form.date1" style="width:100%">
                <el-col :span=6 :offset=2>
                  <el-radio label="保本保收益型"></el-radio>
                </el-col>
                <el-col :span=6>
                  <el-radio label="保本分成型"></el-radio>
                </el-col>
                <el-col :span=6>
                  <el-radio label="不保本分成型"></el-radio>
                </el-col>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 2 -->
    <el-row class="pax" type="flex" align="middle">
      <el-col :span=4 :offset=2 class="sif">
        <p>类型</p>
        <div class="toggle">
          <el-button plain icon="el-icon-caret-top" class="bott"></el-button>
          <el-button plain icon="el-icon-caret-bottom" class="bott"></el-button>
        </div>
      </el-col>
      <el-col :span=4 class="sif">
        区域
        <div class="toggle">
          <el-button plain icon="el-icon-caret-top" class="bott"></el-button>
          <el-button plain icon="el-icon-caret-bottom" class="bott"></el-button>
        </div>
      </el-col>
      <el-col :span=4 class="sif">
        时间
        <div class="toggle">
          <el-button plain icon="el-icon-caret-top" class="bott"></el-button>
          <el-button plain icon="el-icon-caret-bottom" class="bott"></el-button>
        </div>
      </el-col>
      <el-col :span=4 :offset=1 class="sif">
        金额
        <div class="toggle">
          <el-button plain icon="el-icon-caret-top" class="bott"></el-button>
          <el-button plain icon="el-icon-caret-bottom" class="bott"></el-button>
        </div>
      </el-col>
      <el-col :span=4 :offset=1>
        <el-checkbox v-model="checked">仅显示可投</el-checkbox>
      </el-col>
    </el-row>
    <el-row v-for="(item,index) in dataa" :key="index">
      <Money
        :value="item.value"
        :config="config"
        :time="item.time"
        :money="item.money"
        :context="item.context"
        :color="item.color"
      />
    </el-row>
    <!-- 分页 -->
    <el-row class="feny" type="flex" align="middle">
      <el-col :offset=6 :span=16>
        <el-pagination :page-size="20" :pager-count="11"
          :total="1000"
           background
          small
            class="backgroun"
          layout="prev, pager, next, total,jumper"
         ></el-pagination>
      </el-col>
    </el-row>
 
  </div>
</template>

<script>
import Swiper from '../tool/swiper'
import Gengao from "../tool/Messg";
import Money from "../tool/Money";
export default {
  components: {
    Gengao,
    Money,
    Swiper
  },
  data() {
    return {
      checked:true,
      form: {
        name: "全部",
        region: ["全部", "全部"],
        date1: "保本保收益型",
        resource: "全部"
      },
      config: ["预期年化收益率", "理财期限", "理财金额", "按月结算"],
      dataa: [
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已投标",
          color: "background-color:#F98383"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已成标",
          color: "background-color:#797979"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已投标",
          color: "background-color:#F98383"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已成标",
          color: "background-color:#797979"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "开始理财",
          color: "background-color:#F40909"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已投标",
          color: "background-color:#F98383"
        },
        {
          value: ["-10", "~", "100"],
          time: 12,
          money: 9999,
          context: "已成标",
          color: "background-color:#797979"
        }
      ]
    };
  },
  methods: {}
};
</script>
<style scoped>
.bian {
  padding: 8px 10px;
  background-color: #ffffff;
}
.pax {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 20px 0;
  font-size: 16px;
  line-height: 24px;
  border-bottom: 1px solid black;
}
.toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}
.sor {
  height: 50px;
}
.bott {
  margin: 0 !important;
  padding: 0 !important;

  border: transparent;
  font-size: 21px !important;
  vertical-align: center;
  width: 50px;
  height: 15px;
}
.sif {
  display: flex;
  justify-content: center;
  align-items: center;
}
.feny{
    height: 60px;
}

</style>